import { t } from '@/i18n/index';

const COLORS = [
  '#165DFF',
  '#14C9C9',
  '#F7BA1E',
  '#FF7A7A',
  '#3BA272',
  '#91CC75',
  '#73C0DE',
  '#CA90E4',
  '#3F38FC',
  '#F95460',
];

export const chartOptionFn_01 = () => ({
  color: COLORS,
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      let res = `<div style="margin-bottom:8px"><p>${params[0].name} ${t(
        'machineAlarmStatistics.table.chartTitle01'
      )}</p></div>`;
      for (var i = 0; i < params.length; i++) {
        if (params[i].data != undefined) {
          res += `<p style="display: flex;justify-content: space-between;align-items: center;line-height: 25px">
            <span style="color:#666;padding-right:1em">${params[i].marker} ${
            params[i].seriesName
          }</span>
            <span style="color:#999">${params[i].data}${t(
            'machineAlarmStatistics.table.second'
          )}</span>
          </p>
          `;
        }
      }
      return res;
    },
    textStyle: {
      fontSize: 12,
      lineHeight: 28,
      color: '#222',
    },
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    left: 'right',
    type: 'scroll',
    top: 0,
    data: [],
  },
  grid: {
    left: '4%',
    right: '3%',
    top: '90',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E6E6E6',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#666666',
      lineStyle: {},
    },
    data: [],
  },
  yAxis: {
    type: 'value',
    min: 0,
    name: t('machineAlarmStatistics.table.yAxis'),
    nameTextStyle: {
      align: 'right',
    },
    nameGap: 42,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E6E6E6',
      },
    },
    axisTick: {
      alignWithLabel: true,
      lineStyle: {
        color: '#E6E6E6',
      },
    },
    axisLabel: {
      color: '#666666',
      lineStyle: {},
    },
  },
  series: [],
});
//
/**
 * Description
 * @param {any} rang 数据项数量
 * @returns {any}
 */
export const chartOptionFn_02 = (rang) => {
  return {
    color: COLORS,
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const l = params.length / rang;
        let res = `<div style="margin-bottom:8px"><p>${params[0].axisValue} ${t(
          'machineAlarmStatistics.table.chartTitle'
        )}</p></div>`;
        for (let i = 0; i < params.length; i += l) {
          const { name } = params[i];
          res += `<p style="margin-bottom:10px">${name}</p><div style="margin-bottom:10px;">`;
          for (let j = 0; j < l; j++) {
            const index = i + j;
            const { marker, seriesName, value } = params[index];
            res += `<span style="margin-right:24px">
            <span style="margin-right:10px;color:#666;padding-right:1em">${marker} ${seriesName}</span>
            <span style="margin-right:10px;color:#999">${value}次</span>
          </span>
          `;
          }
          res += '</div>';
        }
        return res;
      },
      textStyle: {
        fontSize: 12,
        lineHeight: 28,
        color: '#222',
      },
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      left: 'right',
      type: 'scroll',
      top: 0,
      data: [],
    },
    grid: {
      left: '4%',
      right: '3%',
      top: '90',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E6E6E6',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#666666',
        lineStyle: {},
      },
      data: [],
    },
    yAxis: {
      type: 'value',
      min: 0,
      name: t('machineAlarmStatistics.table.yAxis'),
      nameTextStyle: {
        align: 'right',
      },
      nameGap: 42,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E6E6E6',
        },
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: '#E6E6E6',
        },
      },
      axisLabel: {
        color: '#666666',
        lineStyle: {},
      },
    },
    series: [],
  };
};
